<template>
  <view class="keCming" v-for="item in modLis" :key="item.id">
    <text class="timeToptext" style="font-size: 14px; color:#0066FF;font-weight: 400;">{{item.timeshij}}</text>
    <view class="listBox">
      <view class="smellLiBx">
        <view class="imagTextBox">
          <image class="imagurl" :src='magurl'></image>
          <view class="textLixt">
            <text style="font-size: 14px;font-weight: 700;">课程名称</text><br>
            <text>{{item.text1}}</text><br>
            <text>{{item.text2}}</text><br>
            <text>{{item.text3}}</text>
          </view>
        </view>
        <view class="lisName">
          <text style="font-size: 13px;">{{item.text4}}</text>
        </view>
      </view>
    </view>
  </view>
</template>
<script setup>
  import {
    useListStore
  } from '@/store/pinia/yeStore'
  const magurl = 'https://cdn3.axureshop.com/demo/2027306/images/%E8%A7%82%E7%9C%8B%E5%8E%86%E5%8F%B2_3/u12624.svg'
  const liebiaoshuju = useListStore()
  const modLis = liebiaoshuju.lieBiaoMOsi
</script>
<style lang="scss">
  .keCming {
    width: 100%;
    height:130px;
    border: 1px solid black;
    .timeToptext {
      position: relative;
      display: block;
      padding: 5px 0 0 15px;
      height: 20px;
      width: 100%;
    }

    .listBox {

      .smellLiBx {
        display: flex;
        justify-content: space-around;
        margin-top: 10px;
        .lisName {
          position: relative;
          top: 25%;
          width: 47px;
          height: 20px;
          line-height: 20px;
          text-align: center;
          border: 1px solid #333333;
        }

        .imagTextBox {
          display: flex;

          .imagurl {
            width: 82px;
            height: 82px;
          }
          .textLixt {
            font-size: 12px;
            margin-left: 10px;
          }
        }
      }
    }


  }
</style>
